<template>
  <div class="survey-container">
    <van-nav-bar
      title="问卷调查"
      left-arrow
      @click-left="onClickLeft"
    />
    
    <div class="survey-content">
      <div class="survey-header">
        <h2>欢迎参与问卷调查</h2>
        <p class="subtitle">请填写以下信息，完成后即可参与抽奖</p>
      </div>
      
      <van-form @submit="onSubmit" class="survey-form">
        <van-cell-group>
          <van-field
            v-model="form.name"
            name="name"
            label="姓名"
            placeholder="请输入姓名"
            :rules="[{ required: true, message: '请填写姓名' }]"
          />
          
          <van-field
            v-model="form.companyName"
            name="companyName"
            label="公司名称"
            placeholder="请输入公司名称"
            :rules="[{ required: true, message: '请填写公司名称' }]"
          />
          
          <van-field
            v-model="form.position"
            name="position"
            label="职位"
            placeholder="请输入职位"
            :rules="[{ required: true, message: '请填写职位' }]"
          />
          
          <van-field
            v-model="form.phone"
            name="phone"
            label="手机号"
            placeholder="请输入手机号"
            :rules="[
              { required: true, message: '请填写手机号' },
              { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' }
            ]"
          />
          
          <van-field
            v-model="form.email"
            name="email"
            label="邮箱"
            placeholder="请输入邮箱"
            :rules="[{ pattern: /.+@.+\..+/, message: '请输入正确的邮箱' }]"
          />
          
          <van-field
            v-model="form.productCategory"
            name="productCategory"
            label="产品类别"
            placeholder="请选择产品类别"
            readonly
            :rules="[{ required: true, message: '请选择产品类别' }]"
            @click="showPicker = true"
          />
        </van-cell-group>
        
        <div class="submit-button">
          <van-button round block type="primary" native-type="submit" :loading="loading">
            提交
          </van-button>
        </div>
      </van-form>
    </div>
    
    <van-popup v-model:show="showPicker" position="bottom" round>
      <van-picker
        :columns="productCategoryOptions"
        @confirm="onConfirm"
        @cancel="onCancel"
        show-toolbar
        title="选择产品类别"
        :swipe-duration="300"
        :visible-item-count="5"
        :item-height="44"
      />
    </van-popup>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { showToast, showSuccessToast } from 'vant'
import { userApi } from '../api'

const router = useRouter()
const loading = ref(false)
const showPicker = ref(false)

const productCategoryOptions = [
  { text: '医疗器械', value: '医疗器械' },
  { text: '农药', value: '农药' },
  { text: '医药', value: '医药' },
  { text: '化学品', value: '化学品' },
  { text: '化妆品', value: '化妆品' },
  { text: '危化品', value: '危化品' },
  { text: '其他', value: '其他' }
]

const form = reactive({
  name: '',
  companyName: '',
  position: '',
  phone: '',
  email: '',
  productCategory: ''
})

const onConfirm = (value: { selectedOptions: Array<{ text: string, value: string }> }) => {
  form.productCategory = value.selectedOptions[0].text
  showPicker.value = false
}

const onCancel = () => {
  showPicker.value = false
}

const onClickLeft = () => {
  router.back()
}

const onSubmit = async () => {
  try {
    loading.value = true
    await userApi.submit(form)
    // 保存用户信息到本地存储
    localStorage.setItem('userPhone', form.phone)
    localStorage.setItem('userName', form.name)
    localStorage.setItem('userCompany', form.companyName)
    showSuccessToast('提交成功')
    // 跳转到抽奖页面
    router.push('/lottery')
  } catch (error: any) {
    showToast(error.message || '提交失败')
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.survey-container {
  min-height: 100vh;
  background-color: #fff;
  overflow-x: hidden;
}

.survey-content {
  padding: 24px 16px;
}

.survey-header {
  text-align: center;
  margin-bottom: 32px;
}

.survey-header h2 {
  font-size: 24px;
  color: #323233;
  margin: 0 0 8px;
}

.survey-header .subtitle {
  font-size: 14px;
  color: #969799;
  margin: 0;
}

.survey-form {
  width: 100%;
}

:deep(.van-cell-group) {
  background-color: transparent;
}

:deep(.van-cell) {
  padding: 16px 0;
  background-color: transparent;
}

:deep(.van-field__label) {
  width: 80px;
  color: #323233;
}

:deep(.van-field__control) {
  font-size: 15px;
}

.submit-button {
  margin: 32px 16px 16px;
}

:deep(.van-button) {
  height: 44px;
  font-size: 16px;
}
</style> 